<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            background-color: #FECC5B; 
             list-style-type: none;
            }
        .nav li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            text-decoration: none;
            font-size: 14px;

            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
            background-color: #FECC5B;
        }
        
        .nav a:hover {
            background-color: #dc9e2d;
        }
        
        .nav ul {
            top: 41px;
            left: 0;
            width: 100%;
             display: none;     
             list-style: none;

        }
       
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">移动客户端</a>
            <ul>
                <li>
                    <a href="">新浪微博</a>
                </li>
                <li>
                    <a href="">新浪新闻</a>
                </li>
                <li>
                    <a href="">新浪财经</a>
                </li>
                <li>
                    <a href="">新浪体育</a>
                </li>
                <li>
                    <a href="">黑猫投诉</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">博客</a>
            <ul>
                <li>
                    <a href="">博客评论</a>
                </li>
                <li>
                    <a href="">未读提醒</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">邮箱</a>
            <ul>
                <li>
                    <a href="">免费邮箱</a>
                </li>
                <li>
                    <a href="">VIP邮箱</a>
                </li>
                <li>
                    <a href="">企业邮箱</a>
                </li>
                <li>
                    <a href="">新浪客户端</a>
                </li>
            </ul>
        </li>
    </ul>
  
    <script>
        var nav = document.querySelector('.nav');
        var lis = nav.children; //获得所有的一级li
        for(var i=0;i<lis.length;i++){
            lis[i].onmouseover = function(){
                this.children[1].style.display = 'block';   
                //设置一级li的第二个子节点显示 this指向触发事件的元素 即当前鼠标经过的li
            }
            lis[i].onmouseout = function(){
                this.children[1].style.display = 'none';
            }
        }        
        </script>


</body>

</html>